<template>
  <div>
    <el-form ref="myform1" :model="formItem" label-width="100px" size="mini" class="form-view">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工单标题">
            {{ formItem.title }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到货日期">
            {{ formItem.receiveDate }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存放位置">
            {{ formItem.locationName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库类型">
            {{ formItem.categories === '1' ? '非消耗品' : '消耗品' }}
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="综合管理部" prop="comprehensive">
            {{ formItem.comprehensive === true ? '是' :'否' }}
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="备注信息" prop="remark">
            {{ formItem.remark }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="资产明细">
            <el-table
              :loading="false"
              :data="formItem.assetList"
              border
              class="fixed-table-table"
              size="mini"
              max-height="240px"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50"
                header-align="center"
                align="center"
              />
              <el-table-column v-for="column in insideColumns" :key="column.key" header-align="center" align="center" :label="column.title" :prop="column.key" :sortable="column.sortable">
                <template slot-scope="scope">
                  <column-render :render="column.render" :row="scope.row" :column="column" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col v-if="formItem.categories === '1'" :span="24">
          <el-form-item label="配件明细">
            <el-table
              :loading="false"
              :data="formItem.goodsFileList"
              border
              class="fixed-table-table"
              size="mini"
              max-height="240px"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50"
                header-align="center"
                align="center"
              />
              <el-table-column v-for="column in goodsFileInsideColumns" :key="column.key" header-align="center" align="center" :label="column.title" :prop="column.key" :sortable="column.sortable">
                <template slot-scope="scope">
                  <column-render :render="column.render" :row="scope.row" :column="column" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>

import { formatDate } from '@neu/biz-core/utils/utils'
import { detail } from '@neu/dcam-ui/api/rukuKJ'
// import PageableTable from '@neu/biz-core/components/PageableTable'

const formItem = {
  /** 工单号 */
  workOrderNum: '',
  /** 任务ID */
  taskId: '',
  /** 标题 */
  title: '',
  /** 到货日期 */
  receiveDate: null,
  /** 备注 */
  remark: '',
  /** 是否为暂存 */
  temporary: true,
  // 是否为自动工单
  autogenerate: false,
  /** 购置日期 */
  //   purchaseDate: null,
  /** 是否为综合管理部 */
  comprehensive: true,
  /** 存放位置编码 */
  location: null,
  /** 存放位置编码 */
  locationName: '',
  /** 资产分类 */
  categories: '1',
  /** 资产详情 */
  assetList: [],
  goodsFileList: []
}
export default {
  components: {
    // PageableTable
  },
  props: {
    taskId: {
      required: false,
      type: String,
      default: 'NULL'
    },
    workOrderNum: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formItem: { ...formItem },
      /** 表格列 */
      insideColumns: [],
      /** 表格列原始数据 */
      sInsideColumns: [
        { title: '原始编号', width: 100, key: 'originalCode', display: true },
        { title: '资产名称', width: 140, key: 'name', display: true },
        // { title: '资产编号', width: 140, key: 'code', display: true },
        { title: '大分类', width: 100, key: 'bigTypeName', display: true },
        { title: '中分类', width: 100, key: 'middleTypeName', display: true },
        { title: '小分类', width: 100, key: 'smallTypeName', display: true },
        { title: '购置日期', width: 100, key: 'purchaseDate', render: (h, params) => { return h('span', formatDate(params.row.purchaseDate, 'YYYY-MM-DD')) }, display: true },
        { title: '供应商', width: 100, key: 'supplierName', display: true },
        { title: '品牌', width: 100, key: 'brand', display: true },
        { title: '规格型号', width: 100, key: 'specifications', display: true },
        { title: '序列号', width: 100, key: 'serialnumber', display: true },
        { title: '机房', width: 100, key: 'computerRoom', display: true },
        { title: '机柜', width: 100, key: 'cabinet', display: true },
        { title: '位置', width: 100, key: 'locationName', display: true },
        { title: '维保开始', width: 150, key: 'maintenanceStartTime', render: (h, params) => { return h('span', formatDate(params.row.maintenanceStartTime, 'YYYY-MM-DD')) }, display: true },
        { title: '维保结束', width: 150, key: 'maintenanceEndTime', render: (h, params) => { return h('span', formatDate(params.row.maintenanceEndTime, 'YYYY-MM-DD')) }, display: true },
        { title: '合同', width: 100, key: 'contractName', display: true },
        { title: '计量单位', width: 100, key: 'measureUnit', display: true },
        { title: '数量', width: 100, key: 'amount', display: true },
        { title: '金额', width: 100, key: 'money', display: true },
        { title: '使用期限', width: 100, key: 'usePeriod', display: true },
        { title: '使用部门', width: 150, key: 'managementOrgName', display: true },
        { title: '使用人', width: 100, key: 'managementUserName', display: true },
        { title: '用途', key: 'purpose', display: true },
        { title: '备注', key: 'note', display: true }
      ],
      goodsFileInsideColumns: [
        { title: '配件名称', key: 'name' },
        { title: '配件分类', key: 'spareTypeName' },
        { title: '规格型号', key: 'specification' },
        { title: '配件描述', key: 'description' }
      ]
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 获取借用工单信息
    fetch() {
      if (this.workOrderNum !== 'NULL') {
        detail(this.workOrderNum, this.taskId).then(response => {
          this.formItem = {
            ...response.data
          }
          this.formItem.receiveDate = formatDate(this.formItem.receiveDate, 'YYYY-MM-DD')
          this.changeCol(this.formItem.categories)
        })
      } else {
        this.formItem = { ...formItem }
      }
      this.changeCol(this.formItem.categories)
    },
    /** 显示列变化 */
    changeCol(value) {
      let hiddenColumns = []
      if (value === '3') {
        hiddenColumns = ['bigTypeName', 'middleTypeName', 'originalCode', 'supplierName', 'code', 'card', 'serialnumber', 'computerRoom', 'cabinet', 'location', 'maintenanceStartTime', 'maintenanceEndTime', 'contractName', 'usePeriod', 'managementOrgName', 'managementUserName']
      } else {
        hiddenColumns = ['card', 'amount']
      }
      this.insideColumns = this.sInsideColumns.filter(e => !hiddenColumns.includes(e.key))
    }
  }
}
</script>

<style lang="scss" scoped>
  .fixed-table-table {
    margin: 8px 8px 8px 0;
  }
</style>
